<template>
	<div>
		<el-row></el-row>
		<el-button size="small" type="primary" @click="yjdr">选择文件</el-button>
		<div
          class="el-upload__tip"
          style="color:red"
          slot="tip"
        >提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    <span style="margin-left: 10px;" v-if="fileList&&fileList.name">{{ fileList.name }}</span>
    <span style="margin-left: 10px;" v-else>未选择文件</span>
		<input style="opacity: 0;width: 0px;height: 0px;" type="file" name="file" ref="inputfile" accept=".xlsx" @change="change" />
		<!-- <el-row>
			<el-col :span="24" style="margin-top: 5px;">
				<div style="display: flex;align-items: center;justify-content: space-between;">
					<span>{{ fileList.name }}</span>
				</div>
			</el-col>
		</el-row> -->
	</div>
</template>

<script>
export default {
	props: {
		subtitle: {
			default: 'false'
		},
	},
	data() {
		return {
			fileList: {}
		};
	},
	methods: {
		yjdr() {
			this.$refs.inputfile.click();
		},
		del2(){
			this.fileList = {};
		},
		change() {
			var that = this; //这里使用一个变量 that来拼接this,这样的话在内部就使用thar,在外部就使用this,这样就不会出现指向丢失问题。
			var file = this.$refs.inputfile.files[0]; //获取文件
			// var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加到FormData里面，这样就可以直接把formData作为参数传递了
			if (file) {
				this.fileList = file
				console.log('file==', this.fileList);
			}
			// this.fileList.push(file);
			// formData.append('MultipartFile', file); //接口需要传递的参数

			// let url = apis.fileUpload;
			// let potss = formData;
			// postFormData(url, potss)
			// 	.then(res => {
			// 		console.log('=====', res);
			// 	})
			// 	.catch(err => {
			// 		this.$message.error(err.msg || '获取数据失败');
			// 	});
		},
	}
};
</script>

<style scoped>
	.icon-del-style{
		cursor: pointer;
	}
	.icon-del-style:hover{
		color: red;
	}
</style>
